<template>
	<div class="home">
		<!-- 导航栏 -->
		<van-nav-bar>
		<van-button slot="title" class="search-btn" round icon="search" type="info" size="small" to="/search">搜索</van-button>
		</van-nav-bar>
		<!-- 导航栏 -->
		
		<!-- 标签导航栏 -->
		<van-tabs v-model="active" sticky animated>
			
		  <van-tab v-for="(item, index) in channels" :key="index" :title="item.name">
				<!-- 文章列表 -->
				<ArticleList :channel="item"/>
				<!-- 文章列表 -->
				
			</van-tab>
			
			<div  slot="nav-right" @click="isChannelEditShow = true" class="wap-nav">
				<van-icon name="wap-nav"/>
			</div>
			
			
		</van-tabs>
		<!-- 标签导航栏 -->
		
		<!-- 频道弹出层 -->
		<van-popup v-model="isChannelEditShow" position="bottom" round :style="{ height: '100%' }" 
		closeable get-container="body">
			<channel-edit :userChannels="channels" :active="active" @close="isChannelEditShow = false" @update-active="active = $event"/>
		</van-popup>
		<!-- 频道弹出层 -->
		
	</div>
</template>

<script>
	import { getUserChannels } from '../../utils/user.js'
	import ArticleList from './components/article-list.vue'
	import ChannelEdit from './components/channel-edit.vue'
	import { mapState } from 'vuex'
	import { getItem } from '../../utils/storage.js'

	export default {
		name: 'Home',
		components: {
			ArticleList,
			ChannelEdit
		},
		data() {
			return {
				active:0,
				channels:[],
				isChannelEditShow:false
			}
		},
		created() {
			//频道数据请求
			this.loadChannels()
			
		},
		computed:{
			...mapState(['user'])
		},
		methods: {
			async loadChannels() {
				let channels = []
				if(this.user) {
					//已登录
					const { data } = await getUserChannels()
					channels = data.data.channels
				}else {
					//没有登录
					const loadChannels = getItem('user-channels')
					if(loadChannels) {
						channels = loadChannels
					}else {
						const { data } = await getUserChannels()
						channels = data.data.channels
					}
						}
				this.channels = channels
				//请求获取频道数据
				// const { data } = await getUserChannels()
				
				//将数据放到列表内
				// this.channels = data.data.channels
			},
			showPopup() {
			  this.show = true;
			},
			
		}
	}
</script>

<style scoped>
	/deep/.van-nav-bar__title {
		max-width: none;
	}
	.search-btn {
		width: 277px;
		height: 33px;
		background-color: #5babfb;
		border: none;
	}
	.van-button__text {
		font-size: 14px;
	}
	.search-btn .van-icon {
		color: #fff;
		font-size: 16px;
	}
	.wap-nav {
		position: fixed;
		right: 0;
		background-color: #fff;
		opacity: .9;
		height: 44px;
		line-height: 44px;
		width: 33px;
	}
	
</style>
